<!--
 * @Description: 
 * @Date: 2023-02-27 10:39:24
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 11:27:11
-->
<template>
	<div>
		<div class="header" :style="{ backgroundImage: 'url(' + cosPrefix + nav.bg + ')' }">
			<!-- <span class="title">· {{ nav.name }} ·</span> -->
			<div class="nav-list">
				<span @click="$emits('update:activeIndex', index)" :class="['nav', { active: activeIndex == index }]" v-for="(item, index) in nav.children" :key="index">
					{{ item.name }}
				</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useBaseStore } from "@/store/base";
import { INav } from "@/store/interface/base";

const { cosPrefix } = useBaseStore();

interface BaseHeaderProps {
	nav: INav;
	activeIndex: number;
}
defineProps<BaseHeaderProps>();

const $emits = defineEmits<(e: "update:activeIndex", value: number) => void>();
</script>
<style lang="scss" scoped>
.header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 440px;
	color: rgb(255 255 255 / 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	&::after {
		position: absolute;
		inset: 0;
		content: "";
		background-color: rgba($color: #000000, $alpha: 30%);
	}
}
.title {
	position: relative;
	z-index: 1;
	margin-bottom: 40px;
	font-family: SourceSerif;
	font-size: 48px;
	font-weight: bold;
}
.nav-list {
	position: absolute;
	bottom: 0;
	z-index: 9;
	padding: 20px;
	.nav {
		padding: 10px;
		margin-right: 220px;
		font-size: 24px;
		font-weight: bold;
		cursor: pointer;
		&:last-child {
			margin-right: 0;
		}
		&.active,
		&:hover {
			border-bottom: 2px solid #ffffff;
		}
	}
}

@media all and (max-width: 750px) {
	.header {
		height: 280px;
	}
	.title {
		font-size: 24px;
	}
	.nav-list {
		.nav {
			margin-right: 100px;
			font-size: 16px;
		}
	}
}
</style>
